<script setup lang="ts">
import { onMounted,onUnmounted, reactive, ref, h } from "vue";
import { useRouter,useRoute } from "vue-router";
// import TheWelcome from '../components/TheWelcome.vue'

import {
  NFlex,
  NCard,
  NDropdown,
  NButton,
  NTag,
  type DrawerPlacement,
  NSelect,
  NButtonGroup,
  NColorPicker,
  NSpace,
  NSlider,
} from "naive-ui";
import { NIcon,createDiscreteApi } from "naive-ui";

import SvgIcon from "../components/SvgIcon.vue";
import { sseService } from "../assets/utils/sse";
import type { SSEChatParams } from "../assets/utils/sse";
import { setUrl,setUrlParams } from "@/service/sseUrl";
import { FORM_ADD } from "@/service/apis/from";
const { message } = createDiscreteApi(["message"])
const router = useRouter();
const route = useRoute();
const qd: any = route.query.data
const str = decodeURIComponent(qd)
const qdArr = JSON.parse(str)

//接收props
const props = defineProps({
  title: {
    type: String,
    default: "在线word协同", // 默认值
  },
  icon: {
    type: String,
    default: "Word-Color", // 默认值
  },
});

/**
 * vue-office 组件引用
 */
// import VueOfficeDocx from '@vue-office/docx'
// import '@vue-office/docx/lib/index.css'
// import VueOfficeExcel from '@vue-office/excel'
// import '@vue-office/excel/lib/index.css'
/**
 * end
 */

/**
 * canvas-editor 组件库引用
 * 实现 word 功能
 */
import Editor, {
  ControlType,
  EditorMode,
  ElementType,
  RowFlex,
} from "@hufe921/canvas-editor";

/**
 * end
 */

/**
 * CSV 文件解析库
 */
import Papa from "papaparse";
// import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source'
import { json } from "stream/consumers";
/**
 * csv 库
 * =========
 * end
 */

import { asBlob } from "html-docx-js-typescript";

// ,
// const worker = new Worker(new URL('@/node-minio/minio-js.js',import.meta.url))

// const docpath = ref("./src/assets/ddf.docx")
// const excel = ref("./src/assets/ddf.xlsx")
const docxeditor = ref<any>(null);
const editor = reactive({ showChanges: false });
let wordEditor = ref<HTMLDivElement | any>(null);
const design = EditorMode.DESIGN;

/**
 * 测试 CSV 解析 函数
 */
const callNodeScript = () => {
  /*
   * 实现CSV 解析转JSON 的功能
   */
  //  let str = "id;类型;时间;创建人;人员\\n84545457875845;预约;2024-09-12 15:46:30;创建人;[{'id':'63ba5f021575d240','工号':'0001','姓名':'wang','职务':'','部门':'发达食品公司','流地址':'webrtc://216.fdmf.com:1990/meeting/deee4221fc45e051/0001'}]\\n"
  //   // let str = "第一列;第二列;第三列;第四列\\n 13;[{fk:df,dff:dd},{fk:df,dff:dd}];45;34\\n 13;[{fk:df,dff:dd},{fk:df,dff:dd}];45;34\\n 13;[{fk:df,dff:dd},{fk:df,dff:dd}];45;34"
  //   let fst = str.replace(/\\n/g,"\n")
  //   console.log(fst)
  //   const ddf = Papa.parse(fst,{header:true,delimiter:";",newline:"\n"})
  //   console.log(ddf)

  let jsonstr =
    "[{'id':'63ba5f021575d240','工号':'0001','姓名':'wang','职务':'','部门':'发达食品公司','流地址':'webrtc://216.fdmf.com:1990/meeting/deee4221fc45e051/0001'}]";
  let fst = jsonstr.replace(/\'/g, '"');
  // console.log(JSON.parse(jsonstr))
  console.log(JSON.stringify(fst));
  let jsonlists = JSON.parse(fst);
  console.log(jsonlists);
  console.log("测试输出");
  // worker.postMessage("fdfdfd")
  // worker.onmessage = (e) => {
  //   console.log("dfjdjfkd",e)
  // }
};
/** */
//使用fetch api机制，实现sse post 请求
// const fetchSee = () => {
//     const ctrl = new AbortController()

//     let fetchsse = fetchEventSource("http://localhost:8080/sse/dff/ff", {
//         method: 'GET',
//         headers: {
//             'Content-Type': 'text/event-stream',
//             'token': 'token签名并加密'
//         },
//         body: JSON.stringify({ 'df': 'fdf' }),
//         openWhenHidden: false,
//         onmessage(ev) {
//             console.log(ev)
//         },
//         onerror(err) {
//             console.log(err)
//         },
//         onclose() {
//             console.log('关闭了sse服务')
//         },
//         signal: ctrl.signal
//     }).catch((error) => {
//         console.log('fetcheventsource 函数错误', error)
//     })

// }

/**
 * 构建 SSE 事件监听连接 函数
 */
//创建SSE连接事件监听
const eventSource = ref<EventSource | null>(null);
const connectToSSE = () => {
  eventSource.value = new EventSource(
    "http://localhost:8080/sse/test/fd?token=dkkjfksjkdjkfjs"
  );
  eventSource.value.onopen = (event) => {
    console.log("SSE 开启事件", event);
  };
  eventSource.value.onmessage = (event) => {
    console.log("sse 数据包", event);
  };
  eventSource.value.onerror = (error) => {
    console.log("SSE 错误信息", error);
  };
  const closeSSE = () => {
    if (eventSource.value) {
      eventSource.value.close();
      eventSource.value = null;
    }
  };
  return { closeSSE };
};
/**
 * end
 */

/**
 * 定义 word 组件相关的操作函数
 */
let canvaseditor = ref<Editor | null>(null);
const painterMenu = [
  { label: "格式刷复制", key: "copy" },
  // { label: "格式刷应用", key: "paste" },
  { label: "格式刷清除", key: "format" },
];
// 打印 组件信息
const editscript = () => {
  console.log(" word 组件信息", canvaseditor);
};
//保存word
const saveScript = () => {
  let wordvalue = canvaseditor.value?.command.getValue();
  console.log(wordvalue?.data.main);

  let wordhtml = canvaseditor.value?.command.getHTML();
  console.log(wordhtml?.main);
  saveform(wordhtml)
  if (wordhtml) {
    asBlob(wordhtml.main).then((data) => {
      console.log("docx文件");
      console.log(data);
    });
  }
};
//向word  docx插件
const docxpluginScript = () => {};
//向word 插入表格 默认3行10列
const insureexcelScript = () => {
  canvaseditor.value?.command.executeInsertTable(3, 2);
};
//设置word 只读状态
const onlayScript = () => {
  canvaseditor.value?.command.executeMode(EditorMode.READONLY);
};
//设置word 编辑设计状态
const closeonlay = () => {
  canvaseditor.value?.command.executeMode(EditorMode.DESIGN);
};
// 复制
const copy = () => {
  canvaseditor.value?.command.executeCopy();
};
// 剪切
const cut = () => {
  canvaseditor.value?.command.executeCut();
};
// 粘贴
const paste = () => {
  canvaseditor.value?.command.executePaste();
};

// 格式刷选择
const painterMenuSelect = (key: string) => {
  switch (key) {
    case "copy":
      // 格式刷复制样式
      console.log(key);
      canvaseditor.value?.command.executePainter({ isDblclick: false });
      break;
    case "paste":
      // 格式刷应用样式
      canvaseditor.value?.command.executeApplyPainterStyle();
      break;
    case "format":
      // 格式刷清除样式
      canvaseditor.value?.command.executeFormat();
      break;

    default:
      break;
  }
};
const fdmenu = () => {};

/**
 * 定义格式面板相关的操作函数
 */
const activePlane = ref(true);
const textColor = ref("#000"); // 文本颜色
const showPlane = () => {
  if (activePlane.value) {
    activePlane.value = false;
  } else {
    activePlane.value = true;
  }
};
const closePlane = () => {
  activePlane.value = false;
};
/**
 * end
 *
 */

let valuefont = ref("");
const fontoptions = [
  { label: "微软雅黑", value: "微软雅黑" },
  { label: "宋体", value: "宋体" },
  { label: "黑体", value: "黑体" },
  { label: "Arial", value: "Arial" },
  { label: "Verdana", value: "Verdana" },
  { label: "Times New Roman", value: "Times New Roman" },
  { label: "Georgia", value: "Georgia" },
  { label: "Courier New", value: "Courier New" },
  { label: "Tahoma", value: "Tahoma" },
  { label: "Trebuchet MS", value: "Trebuchet MS" },
  { label: "Palatino Linotype", value: "Palatino Linotype" },
  { label: "Garamond", value: "Garamond" },
  { label: "Courier", value: "Courier" },
];

const onblur = (value: string) => {
  console.log(value);
  // canvaseditor.value?.command.executeSize(36)
  canvaseditor.value?.command.executeFont(value);
};

let valuesize = ref();
const dffsize = [
  { label: "小初", value: 48 },
  { label: "一号", value: 34 },
  { label: "小一", value: 32 },
  { label: "二号", value: 29 },
  { label: "小二", value: 24 },
  { label: "三号", value: 21 },
  { label: "小三", value: 20 },
  { label: "12", value: 12 },
  { label: "14", value: 14 },
  { label: "16", value: 16 },
  { label: "18", value: 18 },
  { label: "22", value: 22 },
  { label: "26", value: 26 },
  { label: "36", value: 36 },
  { label: "38", value: 38 },
  { label: "40", value: 40 },
  { label: "42", value: 42 },
  { label: "44", value: 44 },
  { label: "46", value: 46 },
  { label: "50", value: 50 },
  { label: "52", value: 52 },
];

const onsize = (value: number) => {
  // console.log(value)
  canvaseditor.value?.command.executeSize(value);
};

// 字体加粗
const bold = () => {
  canvaseditor.value?.command.executeBold();
};

// 下划线
const underline = () => {
  canvaseditor.value?.command.executeUnderline();
};
// 删除线
const delete_line = () => {
  canvaseditor.value?.command.executeStrikeout();
};
// 斜体
const italic = () => {
  canvaseditor.value?.command.executeItalic();
};
// 对齐方法
const alignment = (rowFlex: RowFlex) => {
  canvaseditor.value?.command.executeRowFlex(rowFlex);
};

// 字体颜色更改
const editTextColor = (color: string | null) => {
  canvaseditor.value?.command.executeColor(color);
};

// 上标
const Superscript = () => {
  canvaseditor.value?.command.executeSuperscript();
};
// 下标
const Subscript = () => {
  canvaseditor.value?.command.executeSubscript();
};

/**
 * end
 */

/**
 * 初始 word 组件库加载函数
 */
onMounted(() => {
  //实例化 Editor 构建函数 word 组件库
  canvaseditor.value = new Editor(
    wordEditor.value,
    {
      header: [
        {
          value: "山东发达面粉集团",
          size: 32,
          color: "#FF0000",
          rowFlex: RowFlex.JUSTIFY,
        },
        {
          value: "\n",
          type: ElementType.SEPARATOR,
        },
      ],
      main: [
        {
          value: "",
        },
      ],
      footer: [
        {
          value: "\n",
          type: ElementType.SEPARATOR,
        },
        {
          value: "集团地址：山东省济南市西城大厦10F",
          size: 18,
        },
      ],
    },
    {
      // mode: EditorMode.DESIGN,
      margins: [100, 80, 100, 80],
      zone: { tipDisabled: false },
      defaultType: "TABLE",
      maskMargin: [60, 0, 30, 0],
      defaultSize: 22,
      header: { top: 40 },
      footer: { bottom: 70 },
    }
  );

  sseServiceOpen()
  // docxeditor.value
  console.log("word 文档");
});
onUnmounted(() => {
    sseService.disconnect()
})

//插件单选控件

const single = () => {
  canvaseditor.value?.command.executeInsertControl({
    type: ElementType.CONTROL,
    control: {
      conceptId: "3",
      type: ControlType.RADIO,
      code: "98175",
      value: [],
      valueSets: [
        {
          value: "同意",
          code: "98175",
        },
        {
          value: "否定",
          code: "98176",
        },
      ],
    },
    value: "",
  });
};

//插件多选控件
const selectCL = () => {
  canvaseditor.value?.command.executeInsertControl({
    type: ElementType.CONTROL,
    value: "",
    control: {
      conceptId: "2",
      type: ControlType.SELECT,
      value: null,
      code: null,
      placeholder: "有无",
      prefix: "{",
      postfix: "}",
      valueSets: [
        {
          value: "有",
          code: "98175",
        },
        {
          value: "无",
          code: "98176",
        },
        {
          value: "不详",
          code: "98177",
        },
      ],
    },
  });
};

//插入日期控件
const dftest = () => {
  canvaseditor.value?.command.executeInsertControl({
    type: ElementType.CONTROL,
    value: "",
    control: {
      conceptId: "5",
      type: ControlType.DATE,
      value: [
        {
          value: `2022-08-10 17:30:01`,
        },
      ],
      placeholder: "签署日期",
    },
  });
};

const fftest = () => {
  canvaseditor.value?.command.executeInsertControl({
    type: ElementType.RADIO,
    checkbox: {
      value: false,
    },
    value: "是的",
  });
};
/**
 * end
 */

/**
 * 绑定函数
 * vue-office 组件函数
 */
const renderedHandler = () => {
  console.log("渲染完成");
};
const errorHandler = () => {
  console.log("渲染失败");
};
/**
 * end
 */

/**
 * 头部标题图标设置
 * 头标下拉菜单设置
 */
const options_word = [
  { label: "保存", key: "保存" },

  { label: "导出pdf", key: "导出pdf" },
  { label: "打印", key: "打印" },
];
const wordSelect = (key: string) => {
  console.log(key);
};
let wordIcon = () => {
  return h(NFlex, () => [
    h(
      NDropdown,
      {
        trigger: "hover",
        size: "huge",
        showArrow: true,
        options: options_word,
        onSelect: wordSelect,
      },
      () =>
        h(NButton, { text: true, style: "font-size: 24px" }, () =>
          h(SvgIcon, { iconClass: props.icon })
        )
    ),
    h("div", props.title),
  ]);
};
const header_word = () => wordIcon();

// const zoomValue = 50
const newZoomValue = ref(100);
// const
// 进度条控制
const sliderUpdate = (val: number) => {
  newZoomValue.value = val;
  // console.log(zoomValue,newZoomValue.value)
  // if(val > 50){
  //   big()
  // }
  // if(val < 100){
  //   small()
  // }
  // let a = val
  // zoomValue.value += val
  // let b = zoomValue.value-a
  // console.log("222222222111")
  // for (let i = 0; i < a; i++) {
  //   console.log(i)

  // }
};
// 开始
const dragstartFunc = () => {
  // big()
};
// 结束
const dragendFunc = () => {
  // console.log("_____________")
};
// 放大
const big = () => {
  for (let i = 0; i < 5; i++) {
    canvaseditor.value?.command.executePageScaleAdd();
  }

  // newZoomValue.value +=10
};
// 缩小
const small = () => {
  if (newZoomValue.value == 25) {
    for (let i = 0; i < 50; i++) {
      canvaseditor.value?.command.executePageScaleMinus();
    }
  }
  if (newZoomValue.value == 50) {
    for (let i = 0; i < 25; i++) {
      canvaseditor.value?.command.executePageScaleMinus();
    }
  }
  // newZoomValue.value -=10
};
// 比例

/**
 * end
 */
/**
 * word 表格菜单
 */
const tableMenu = [
  { label: "插入流程表格", key: "a" },
  { label: "插入数据表格", key: "b" },
  { label: "插入多行多列", key: "c" },
];
const tableMenuSelect = (key: string) => {
  console.log(key);
  if (key === "a") {
    canvaseditor.value?.command.executeInsertTable(3, 2);
  } else if (key === "b") {
    canvaseditor.value?.command.executeInsertTable(3, 6);
  } else if (key === "c") {
    canvaseditor.value?.command.executeInsertTable(10, 10);
  }
};
/**
 * end
 */

/**
 * word 控件菜单
 */
const controlMenu = [
  { label: "单选", key: "单选" },
  { label: "多选", key: "多选" },
  { label: "日期", key: "日期" },
];
const controMenuSelect = (key: string) => {
  console.log(key);
  if (key === "单选") {
    single();
  } else if (key === "多选") {
    selectCL();
  } else if (key === "日期") {
    dftest();
  }
};
/**
 * end
 *
 */

/**
 * 关闭页面，原则返回上一页
 */
const handleClose = () => {
  console.log("关闭页面");
  router.go(-1);
};
const selectoptions = [
  { label: "25%", value: 25 },
  { label: "50%", value: 50 },
  { label: "100%", value: 100 },
  { label: "150%", value: 150 },
  { label: "200%", value: 200 },
];
const selectFunc = (e: number) => {
  // console.log(e)
  // canvaseditor.value?.command.executePageScaleRecovery()

  if (e == 25) {
    console.log(e);
    
    for(let i=0;i<50;i++){
      canvaseditor.value?.command.executePageScaleMinus()
   }
  } else if (e == 50) {
    console.log(e);
    for(let i=0;i<25;i++){
      canvaseditor.value?.command.executePageScaleMinus()
     }
  } else if (e == 100) {
    canvaseditor.value?.command.executePageScaleRecovery()
  } else if (e == 150) {
    for(let i=0;i<10;i++){
      canvaseditor.value?.command.executePageScaleAdd()
     }
  } else if (e == 200) {
    for(let i=0;i<20;i++){
      canvaseditor.value?.command.executePageScaleAdd()
     }
  } else {
    return;
  }

  // if(newZoomValue.value >100){
  //   big()
  // }

  // if(newZoomValue.value == 25){
  //   for(let i=0;i<50;i++){
  //     canvaseditor.value?.command.executePageScaleMinus()
  //    }
  // }
  //  if(newZoomValue.value == 50){
  //   for(let i=0;i<25;i++){
  //     canvaseditor.value?.command.executePageScaleMinus()
  //  }
  //  }
};
/**
 * end
 */

//see 链接
const sseServiceOpen = () => {
    const onopen = () => {
        console.log("建立会议列表sse连接成功")
    }
    // 建立连接
    let sseChatParams: SSEChatParams = {
        onopen,
        url:setUrlParams(qdArr.yysx,'readme'),
        onmessage: (event: MessageEvent) => {
            // 收到消息
            console.log('会议列表：', event.data);
            // let fst = event.data.replace(/\\n/g, "\n")
            // const ddf = Papa.parse(fst, { header: true, delimiter: ";", newline: "\n" })
            let a = JSON.parse(event.data)
            console.log(a,);

            setTimeout(()=>{
              canvaseditor.value?.command.executeSetHTML({main:a['数据结构'].main})
            },100)
            
        },
        finallyHandler: () => {
            console.log("finallyHandler操作")
        }
    };
    sseService.connect(sseChatParams)
}

function saveform(html:any){ 
  let data = {
            类型: "数据",
            内容: {
                应用名称: qdArr.yymc,
                类型: "word",
                名称: '表格',
                内容: html
            }
        }
        FORM_ADD({ "params": JSON.stringify(data) }).then((res: any) => {
            // console.log( res);
            if (res.stacode == 200) {
                message.success(res.message)
            }
        }).catch((err: any) => {
            console.log('err', err);

        })
}
</script>

<template>
  <n-card :title="header_word" closable @close="handleClose">
    <template #header-extra>
      <n-flex justify="space-between">
        <slot name="header-extra"></slot>

        <n-button @click="onlayScript" text ghost>只读模式</n-button>
        <n-button @click="closeonlay" text ghost>设计模式</n-button>
        <button @click="fdmenu">测试图标菜单</button>
        <button @click="connectToSSE">SSE服务加载</button>
        <!-- <button @click="fetchSee">fetchSSE</button> -->
        <button @click="callNodeScript">测试</button>
        <button @click="saveScript">保存</button>
      </n-flex>
    </template>

    <n-flex vertical>
      <n-flex justify="space-between">
        <!-- 左侧 -->
        <n-flex>
          <n-button>显示</n-button>
            <n-select style="width: 80px;"
              v-model:value="newZoomValue"
              :options="selectoptions"
              @update:value="selectFunc"
            />

          <n-tag :bordered="false" type="error" round closable>
            您！未给文件命名！
          </n-tag>
          <n-tag :bordered="false" type="warning">
            文件会每一分钟自动提交保存
          </n-tag>
        </n-flex>
        <!-- 中间 -->
        <n-flex justify="center">
          <n-button @click="copy">复 制</n-button>
          <n-button @click="cut">剪 切</n-button>
          <n-button @click="paste">粘 贴</n-button>
          <n-dropdown
            trigger="hover"
            :options="painterMenu"
            @select="painterMenuSelect"
          >
            <n-button>格式刷</n-button>
          </n-dropdown>

          <n-dropdown
            trigger="hover"
            :options="tableMenu"
            @select="tableMenuSelect"
          >
            <n-button>表格</n-button>
          </n-dropdown>

          <n-dropdown
            trigger="hover"
            :options="controlMenu"
            @select="controMenuSelect"
          >
            <n-button>控件</n-button>
          </n-dropdown>
          
          <n-button @click="editscript" ghost>打印word组件</n-button>
          <n-button @click="docxpluginScript">文件签字审批流程选择</n-button>
          <n-button>签名</n-button>
        </n-flex>
        <!-- 右侧 -->
        <n-flex justify="end">
          <n-button @click="showPlane" ghost>
            <template #icon>
              <n-icon>
                <svg-icon
                  :icon-class="activePlane ? 'yangshi' : 'chaboxiaoxi-yangshi'"
                />
              </n-icon>
            </template>
            格式
          </n-button>
        </n-flex>
        <!-- end -->
      </n-flex>
      <slot name="default"></slot>
      <n-flex justify="space-between">
        <n-flex>
          <div style="border: 0px solid #de1515; width: calc(100vw / 6)">
            <n-card title="文档目录结构" style="height: 100%" closable>
              <template #default> </template>
              <template #action>
                <div></div>
              </template>
            </n-card>
          </div>
        </n-flex>
        <n-flex class="flowsss">
          <div style="border: 1px solid #de1515" ref="wordEditor"></div>
        </n-flex>
        <n-flex>
          <div
            style="
              width: calc(100vw / 6);
              border: 0px solid #de1515;
              margin-top: 10px;
            "
          >
            <n-card
              v-show="activePlane"
              title="格式"
              style="height: 100%"
              closable
              @close="closePlane"
            >
              <n-flex vertical>
                <div class="my-title">字体</div>
                <n-select
                  v-model:value="valuefont"
                  :options="fontoptions"
                  @update:value="onblur"
                />
                <n-select
                  v-model:value="valuesize"
                  :options="dffsize"
                  @update:value="onsize"
                />
                <n-space>
                  <n-button-group size="medium">
                    <n-button type="default" round @click="bold">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitijiacu" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="italic">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitixieti" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="underline">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitixiahuaxian" />
                        </n-icon>
                      </template>
                    </n-button>

                    <n-button type="default" round @click="delete_line">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="a-bianzu3" />
                        </n-icon>
                      </template>
                    </n-button>
                  </n-button-group>
                </n-space>
                <n-space>
                  <n-button-group size="medium">
                    <n-button
                      type="default"
                      round
                      @click="alignment(RowFlex.LEFT)"
                    >
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zuoduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="alignment(RowFlex.CENTER)">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="juzhongduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="alignment(RowFlex.RIGHT)">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="youduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button
                      type="default"
                      round
                      @click="alignment(RowFlex.JUSTIFY)"
                    >
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zuoyouduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                  </n-button-group>
                </n-space>
                <n-space>
                  <n-button-group size="medium">
                    <n-button type="default" round @click="Superscript">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitishangbiao" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" round @click="Subscript">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitixiabiao" />
                        </n-icon>
                      </template>
                    </n-button>
                  </n-button-group>
                </n-space>
                <n-flex justify="space-between">
                  <div class="my-title">文本颜色</div>
                  <n-color-picker
                    v-model="textColor"
                    :show-alpha="false"
                    :modes="['hex']"
                    :on-update:value="editTextColor"
                  />
                </n-flex>
              </n-flex>
            </n-card>
          </div>
        </n-flex>
      </n-flex>
    </n-flex>
  </n-card>
</template>

<style scoped>
.flowsss {
  overflow: scroll;
  height: calc(100vh - 260px);
}

.flowsss::-webkit-scrollbar {
  display: none;
}
.my-title {
  font-size: large;
  font-weight: 700;
}
.text-color {
  width: 50px;
  height: 20px;
  background-color: black;
}
</style>
